<template>
  <div>
    <el-input placeholder="输入关键字进行过滤" v-model="filterText"> </el-input>
    <el-tree
      class="filter-tree"
      :data="data"
      :props="defaultProps"
      :show-checkbox="showCheckbox"
      node-key="menuid"
      default-expand-all
      :filter-node-method="filterNode"
      ref="tree"
      @check="getCheckedKeys"
    >
    </el-tree>
  </div>
</template>
<script>
  export default {
    props: ["showCheckbox", "roleId"],
    watch: {
      filterText(val) {
        this.$refs.tree.filter(val);
      },
      //父组件传入的角色id，渲染，子组件的所勾选的权限

      roleId: {
        handler: function (newValue) {
          this.$axios
            .get("/api/rbacRole/checked/" + newValue)
            .then((res) => {
              console.log(res);
              if (res.data.code == 200) {
                this.checked = res.data.data;
              }
              this.$refs.tree.setCheckedKeys(this.checked);
            })
            .catch();
        },
        immediate: true
      },
    },
    created() {
      this.$axios("/api/rbacMenu/findAll")
        .then((res) => {
          if (res.data.code == 200) {
            this.data = res.data.data;
          }
        })
        .catch();
    },
    methods: {
      filterNode(value, data) {
        if (!value) return true;
        return data.menuname.indexOf(value) !== -1;
      },
      getCheckedKeys() {
        //获取都选中的节点，包含半选节点 父id
        console.log(this.$refs.tree.getCheckedKeys());
        this.$emit("callFather", this.$refs.tree.getCheckedKeys());
      },
    },

    data() {
      return {
        filterText: "",
        data: [],
        checked: [],
        defaultProps: {
          children: "menus",
          label: "menuname",
        },
      };
    },
  };
</script>